<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input">
        <uni-icons type="search" size="16" color="#666"></uni-icons>
        <input type="text" v-model="searchValue" placeholder="搜索酒店" @confirm="handleSearch" confirm-type="search" />
        <view class="search-btn" @click="handleSearch" v-if="searchValue">搜索</view>
        <view class="search-btn" @click="handleClear" v-if="searchValue">清除</view>
      </view>
    </view>

    <!-- 酒店列表 -->
    <view class="hotel-list">
      <view class="hotel-item" v-for="hotel in hotelList" :key="hotel.hotelId" @click="goToDetail(hotel.hotelId)">
        <image :src="IMAGE_BASE + hotel.image" mode="scaleToFill" class="hotel-image"></image>
        <view class="hotel-info">
          <view class="hotel-name">{{ hotel.hotelName }}</view>
          <view class="hotel-desc">{{ hotel.description }}</view>
          <view class="hotel-meta">
            <view class="hotel-address">
              <uni-icons type="location" size="14" color="#666"></uni-icons>
              <text>{{ hotel.address }}</text>
            </view>
            <!-- <view class="hotel-price">
              <text class="price">¥{{ hotel.price }}</text>
              <text class="label">起</text>
            </view> -->
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="hotelList.length === 0">
      <image src="/static/images/empty.png" mode="aspectFit"></image>
      <text>暂无酒店信息</text>
    </view>
  </view>
</template>

<script>
import { getHotelList } from '@/api/hotel.js'
import config from '../../api/config.js'

export default {
  data () {
    return {
      hotelList: [],
      searchValue: '',
      IMAGE_BASE: config.image_base,
      loading: false
    }
  },
  onLoad () {
    this.getHotels()
  },
  methods: {
    // 获取酒店列表
    getHotels () {
      this.loading = true
      getHotelList({ keyword: this.searchValue }).then(res => {
        if (res.code === 200) {
          this.hotelList = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 搜索处理
    handleSearch () {
      this.getHotels()
    },
    // 清除搜索
    handleClear () {
      this.searchValue = ''
      this.getHotels()
    },
    // 跳转到详情
    goToDetail (hotelId) {
      uni.navigateTo({
        url: `/pages/hotel/detail?id=${hotelId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.search-box {
  margin-bottom: 20rpx;

  .search-input {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20rpx;
    border-radius: 12rpx;

    input {
      flex: 1;
      margin: 0 20rpx;
      font-size: 28rpx;
    }

    .search-btn {
      font-size: 24rpx;
      color: #666;
      padding: 0 20rpx;
    }
  }
}

.hotel-list {
  .hotel-item {
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .hotel-image {
      width: 100%;
      height: 300rpx;
    }

    .hotel-info {
      padding: 20rpx;

      .hotel-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }

      .hotel-desc {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .hotel-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #999;

        .hotel-address {
          display: flex;
          align-items: center;

          text {
            margin-left: 6rpx;
          }
        }

        .hotel-price {
          .price {
            font-size: 32rpx;
            color: #f56c6c;
            font-weight: bold;
          }

          .label {
            font-size: 24rpx;
            color: #999;
            margin-left: 4rpx;
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>